{% extends 'music_base.html' %}
{% load static %}
{% block head %}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;

    background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
    background-size: cover;
  }

  .my_button {
      {
      #background-color: red;
      /* Green */
      #
    }

    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
  }

  .my_button1 {
    background-color: white;
    color: black;
    border: 2px solid red;
    font-size: 15px;
  }

  .my_button1:hover {
    background-color: red;
    color: white;
  }

  .my_button2 {
    background-color: white;
    color: black;
    border: 2px solid deepskyblue;
    font-size: 15px;
  }

  .my_button2:hover {
    background-color: deepskyblue;
    color: white;
  }
</style>
{% endblock %}

{% block title %}
个人信息
{% endblock %}

{% block body %}

<div class="profile-container">
  <div>
    <h2>{{ music.music_name }}</h2>
    <p>
      <span>所属类别：{{ music.genre.genre_name }}</span>
      <span>浏览量：{{ music.play_count }}</span>
      <span>创建时间：{{ music.created_at }}</span>
    </p>
    <div>
      <img src="{{ MEDIA_URL }}{{ music.cover_image }}" style="width: 200px;" />
    </div>

    <div>
      <p style="color: red">作者：{{ music.artist }}</p>
      <audio controls>
        <source src="{{ music.music_file.url }}" type="audio/mpeg" />您的浏览器不支持音频元素。
      </audio>
      <p>歌词：{{ music.lyrics }}</p>
    </div>
    <div>
      {% if not flag_mask %}
      <form method="post" action="{% url 'input_music_score' %}">
        {% csrf_token %}
        <input type="hidden" name="music_id" value="{{ music.id }}">
        <label for="input-score">请您评分：</label>
        <select name="score" id="input-score">
          <option value="5">5分</option>
          <option value="4">4分</option>
          <option value="3">3分</option>
          <option value="2">2分</option>
          <option value="1">1分</option>
        </select>
        <button class="btn-sm my_button2" type="submit" id="score-btn" music-id="{{ music.id }}">提交评分</button>
      </form>
    {% else %}
      <label for="">您的评分：{{ flag_mask.rating_score }}</label>
    {% endif %}    
    </div>
    <div>
      <button id="add-like-btn" music-id="{{ music.id }}" class="my_button2">收藏</button>
    </div>
  </div>
  <div>
    <h3>评论列表</h3>
    <ul>
      {% for comment in comments %}
      <li>
        <div>
          <p>
            <span>{{ comment.user.user.username }}</span>
            <span>{{ comment.created_at }}</span>
          </p>
          <p>{{ comment.comment_content }}</p>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
  <div>
    <h3>发布留言</h3>
    <textarea name="comment" id="comment-textarea" style="width: 100%; resize:vertical;"></textarea>
    <div>
      <button id="add-comment-btn" music-id="{{ music.id }}" class="my_button2">发布留言</button>
    </div>
  </div>
</div>
<script>


  var MusicDetail = function () {
  };


  MusicDetail.prototype.listenScoreEvent = function () {
    $("#score-btn").on("click", function (event) {
      event.preventDefault();
      var score = $("#input-score").val();
      var $this = $(this);
      var music_id = $this.attr('music-id');

      $.ajax({
        url: "/music/score/input/",
        type: 'POST',
        data: {
          score,
          music_id
        },
        success: function (result) {
          if (result['code'] === 200) {
            alert('评价成功');
            location.reload();
          } else {
            alert(result['message']);
          }
        }
      })
    });
  };

  MusicDetail.prototype.listenAddLike = function () {
    $("#add-like-btn").on("click", function (event) {
      event.preventDefault();
      var $this = $(this);
      var music_id = $this.attr('music-id');

      $.ajax({
        url: "/music/like/add/",
        type: 'POST',
        data: {
          music_id
        },
        success: function (result) {
          if (result['code'] === 200) {
            alert('加入成功');
            location.reload()
          } else {
            alert(result['message']);
          }
        }
      })
    });
  };


  MusicDetail.prototype.listenAddComment = function () {
    $("#add-comment-btn").on("click", function (event) {
      event.preventDefault();
      var $this = $(this);
      var music_id = $this.attr('music-id');
      var content = $('#comment-textarea').val();
      $.ajax({
        url: "/music/comment/add/",
        type: 'POST',
        data: {
          music_id,
          content
        },
        success: function (result) {
          if (result['code'] === 200) {
            alert('发布成功');
            location.reload()
          } else {
            alert(result['message']);
          }
        }
      })
    });
  };


  MusicDetail.prototype.run = function () {
    this.listenAddComment();
    this.listenScoreEvent();
    this.listenAddLike();
  };


  $(function () {
    var handler = new MusicDetail();
    handler.run();
  });

</script>
{% endblock %}